<template>
  <div>
    <div>
      <a-carousel arrows>
        <div
          slot="prevArrow"
          slot-scope="props"
          class="custom-slick-arrow"
          style="left: 10px;zIndex: 1"
        >
          <a-icon type="left-circle" />
        </div>
        <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px;">
          <a-icon type="right-circle" style="    text-align: center;"/>
        </div>
        <div v-for="(item,index) in baseUrl" class="imgs" :key="index">
          <img :src="item.img" alt />
        </div>
        <!-- <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>-->
      </a-carousel>
    </div>
  </div>
</template>

<script>
import pick from 'lodash.pick'
// import { JeecgListMinxinPost } from '@/mixins/JeecgListMinxinPost'

import { correlationEdit } from '@/api/api'

import '@/assets/less/TableExpand.less'
// const baseUrl = 'http://erp.95081.com/img/img/2019/05/13/fc27d1ce50104b8aad5fb54a4a3737ae.jpg'
export default {
  name: 'relation',
  //   mixins: [JeecgListMinxinPost],
  inject: ['reload'],
  components: {},
  data() {
    return {
      baseUrl: [
        // {
        //   img: 'https://gkak-file.oss-cn-beijing.aliyuncs.com/dang-an/1ea1d5de-fb1f-44b6-b00a-9ab9d650176c/微信图片_20200814150107.png',
        // },
        {
          img: 'https://gkak-file.oss-cn-beijing.aliyuncs.com/dang-an/39674f6d-f71d-48bc-9cf6-76744e5687c0/2.png',
        },{
          img: "https://gkak-file.oss-cn-beijing.aliyuncs.com/dang-an/e80cc87d-b8a4-4f4c-9913-4d3a5b45946e/1.png",
        },
      ],

      url: {
        // list: '/wsWenShuDangAnController/gl/queryCorrelationList',
        // delete: '/wsWenShuDangAnController/delete',
        // deleteBatch: '/wsZhuWenShu/deleteBatch',
      },
    }
  },
  created: function () {},
  methods: {
    getImgUrl(i) {
      return this.baseUrl[i].img
    },
  },
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.btn {
  width: 100%;
  text-align: right;
  margin: 10px 0;
  .ant-btn {
    margin-right: 30px;
  }
}
/* For demo */
.ant-carousel /deep/ .slick-slide {
  text-align: center;
  // height: 300px;
  line-height: 160px;
   background: #364d79;
  // overflow: hidden;
}

.ant-carousel /deep/ .custom-slick-arrow {
  width: 300px;
  height: 300px;
  font-size: 25px;
  color: #333;
  opacity: 0.3;
}
.ant-carousel /deep/ .slick-next{
    text-align: right;
}
.ant-carousel /deep/ .custom-slick-arrow:before {
  display: none;
}
.ant-carousel /deep/ .custom-slick-arrow:hover {
  opacity: 0.5;
}


img{
     width: auto;  
    height: auto;  
    max-width: 100%;  
    max-height: 100%;  

}
.imgs{
  display: flex!important;
  justify-content: center;
}
</style>
